<template>
  <div class="statistics-management">
    <el-tabs v-model="activeTab" class="statistics-tabs">
      <!-- 概览统计 -->
      <el-tab-pane label="数据概览" name="overview">
        <!-- 统计卡片 -->
        <el-row :gutter="20" class="statistics-row">
          <el-col :span="6" v-for="(stat, index) in overviewStats" :key="index">
            <el-card class="statistics-card" shadow="hover">
              <div class="statistics-content">
                <div
                  class="statistics-icon"
                  :style="{ backgroundColor: stat.color }"
                >
                  <i :class="stat.icon"></i>
                </div>
                <div class="statistics-info">
                  <div class="label">{{ stat.label }}</div>
                  <div class="value">{{ stat.value }}</div>
                  <div
                    class="trend"
                    :class="{ up: stat.trend > 0, down: stat.trend < 0 }"
                  >
                    {{ Math.abs(stat.trend) }}%
                    {{ stat.trend > 0 ? "增长" : "下降" }}
                    <i
                      :class="
                        stat.trend > 0 ? 'fas fa-arrow-up' : 'fas fa-arrow-down'
                      "
                    ></i>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <!-- 趋势图表 -->
        <el-row :gutter="20" class="chart-row">
          <el-col :span="12">
            <el-card class="chart-card">
              <template #header>
                <div class="card-header">
                  <span>交易趋势</span>
                  <el-radio-group v-model="transactionTimeRange" size="small">
                    <el-radio-button label="week">本周</el-radio-button>
                    <el-radio-button label="month">本月</el-radio-button>
                    <el-radio-button label="year">本年</el-radio-button>
                  </el-radio-group>
                </div>
              </template>
              <div ref="transactionChartRef" style="height: 300px"></div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="chart-card">
              <template #header>
                <div class="card-header">
                  <span>用户增长</span>
                  <el-radio-group v-model="userTimeRange" size="small">
                    <el-radio-button label="week">本周</el-radio-button>
                    <el-radio-button label="month">本月</el-radio-button>
                    <el-radio-button label="year">本年</el-radio-button>
                  </el-radio-group>
                </div>
              </template>
              <div ref="userChartRef" style="height: 300px"></div>
            </el-card>
          </el-col>
        </el-row>

        <!-- 分布图表 -->
        <el-row :gutter="20" class="chart-row">
          <el-col :span="12">
            <el-card class="chart-card">
              <template #header>
                <div class="card-header">
                  <span>收入构成</span>
                </div>
              </template>
              <div ref="incomeChartRef" style="height: 300px"></div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="chart-card">
              <template #header>
                <div class="card-header">
                  <span>用户分布</span>
                </div>
              </template>
              <div ref="userDistributionChartRef" style="height: 300px"></div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>

      <!-- 商家分析 -->
      <el-tab-pane label="商家分析" name="merchant">
        <!-- 商家统计卡片 -->
        <el-row :gutter="20" class="statistics-row">
          <el-col :span="6" v-for="(stat, index) in merchantStats" :key="index">
            <el-card class="statistics-card" shadow="hover">
              <div class="statistics-content">
                <div
                  class="statistics-icon"
                  :style="{ backgroundColor: stat.color }"
                >
                  <i :class="stat.icon"></i>
                </div>
                <div class="statistics-info">
                  <div class="label">{{ stat.label }}</div>
                  <div class="value">{{ stat.value }}</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <!-- 商家排行榜 -->
        <el-card class="rank-card">
          <template #header>
            <div class="card-header">
              <span>商家排行榜</span>
              <el-select v-model="rankType" size="small" style="width: 120px">
                <el-option label="交易额" value="amount" />
                <el-option label="订单量" value="orders" />
                <el-option label="评分" value="rating" />
              </el-select>
            </div>
          </template>
          <el-table :data="merchantRankList" border style="width: 100%">
            <el-table-column type="index" label="排名" width="80" />
            <el-table-column prop="name" label="商家名称" min-width="200" />
            <el-table-column prop="amount" label="交易额" width="150">
              <template #default="scope">
                ¥{{ scope.row.amount.toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column prop="orders" label="订单量" width="120" />
            <el-table-column prop="rating" label="评分" width="120">
              <template #default="scope">
                <el-rate
                  v-model="scope.row.rating"
                  disabled
                  show-score
                  text-color="#ff9900"
                />
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>

      <!-- 用户分析 -->
      <el-tab-pane label="用户分析" name="user">
        <!-- 用户画像 -->
        <el-row :gutter="20" class="chart-row">
          <el-col :span="12">
            <el-card class="chart-card">
              <template #header>
                <div class="card-header">
                  <span>用户年龄分布</span>
                </div>
              </template>
              <div ref="ageChartRef" style="height: 300px"></div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="chart-card">
              <template #header>
                <div class="card-header">
                  <span>用户消费能力</span>
                </div>
              </template>
              <div ref="consumptionChartRef" style="height: 300px"></div>
            </el-card>
          </el-col>
        </el-row>

        <!-- 用户行为分析 -->
        <el-card class="behavior-card">
          <template #header>
            <div class="card-header">
              <span>用户行为分析</span>
              <el-date-picker
                v-model="behaviorDateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="small"
              />
            </div>
          </template>
          <el-table :data="behaviorList" border style="width: 100%">
            <el-table-column prop="date" label="日期" width="120" />
            <el-table-column prop="pv" label="页面浏览量" width="120" />
            <el-table-column prop="uv" label="访客数" width="120" />
            <el-table-column prop="newUsers" label="新增用户" width="120" />
            <el-table-column prop="activeUsers" label="活跃用户" width="120" />
            <el-table-column prop="orderRate" label="下单转化率" width="120">
              <template #default="scope"> {{ scope.row.orderRate }}% </template>
            </el-table-column>
            <el-table-column
              prop="avgTime"
              label="平均停留时间"
              min-width="150"
            />
          </el-table>
        </el-card>
      </el-tab-pane>

      <!-- 订单分析 -->
      <el-tab-pane label="订单分析" name="order">
        <!-- 订单统计 -->
        <el-row :gutter="20" class="statistics-row">
          <el-col :span="6" v-for="(stat, index) in orderStats" :key="index">
            <el-card class="statistics-card" shadow="hover">
              <div class="statistics-content">
                <div
                  class="statistics-icon"
                  :style="{ backgroundColor: stat.color }"
                >
                  <i :class="stat.icon"></i>
                </div>
                <div class="statistics-info">
                  <div class="label">{{ stat.label }}</div>
                  <div class="value">{{ stat.value }}</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <!-- 订单趋势图 -->
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>订单趋势</span>
              <el-radio-group v-model="orderTimeRange" size="small">
                <el-radio-button label="week">本周</el-radio-button>
                <el-radio-button label="month">本月</el-radio-button>
                <el-radio-button label="year">本年</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div ref="orderChartRef" style="height: 300px"></div>
        </el-card>

        <!-- 订单类型分布 -->
        <el-row :gutter="20" class="chart-row">
          <el-col :span="12">
            <el-card class="chart-card">
              <template #header>
                <div class="card-header">
                  <span>订单类型分布</span>
                </div>
              </template>
              <div ref="orderTypeChartRef" style="height: 300px"></div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="chart-card">
              <template #header>
                <div class="card-header">
                  <span>支付方式分布</span>
                </div>
              </template>
              <div ref="paymentChartRef" style="height: 300px"></div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import * as echarts from "echarts";

const activeTab = ref("overview");

// 概览统计数据
const overviewStats = ref([
  {
    label: "总交易额",
    value: "¥1,286,560",
    trend: 15.4,
    icon: "fas fa-yuan-sign",
    color: "#409EFF",
  },
  {
    label: "总订单数",
    value: "12,860",
    trend: 8.2,
    icon: "fas fa-shopping-cart",
    color: "#67C23A",
  },
  {
    label: "总用户数",
    value: "45,678",
    trend: 12.5,
    icon: "fas fa-users",
    color: "#E6A23C",
  },
  {
    label: "商家数量",
    value: "268",
    trend: 5.8,
    icon: "fas fa-store",
    color: "#F56C6C",
  },
]);

// 商家统计数据
const merchantStats = ref([
  {
    label: "总商家数",
    value: "268",
    icon: "fas fa-store",
    color: "#409EFF",
  },
  {
    label: "新增商家",
    value: "12",
    icon: "fas fa-plus",
    color: "#67C23A",
  },
  {
    label: "活跃商家",
    value: "186",
    icon: "fas fa-chart-line",
    color: "#E6A23C",
  },
  {
    label: "待审核",
    value: "8",
    icon: "fas fa-clock",
    color: "#F56C6C",
  },
]);

// 订单统计数据
const orderStats = ref([
  {
    label: "总订单数",
    value: "12,860",
    icon: "fas fa-shopping-cart",
    color: "#409EFF",
  },
  {
    label: "已完成",
    value: "10,628",
    icon: "fas fa-check",
    color: "#67C23A",
  },
  {
    label: "进行中",
    value: "1,860",
    icon: "fas fa-spinner",
    color: "#E6A23C",
  },
  {
    label: "已取消",
    value: "372",
    icon: "fas fa-times",
    color: "#F56C6C",
  },
]);

// 时间范围
const transactionTimeRange = ref("week");
const userTimeRange = ref("week");
const orderTimeRange = ref("week");

// 商家排行榜数据
const rankType = ref("amount");
const merchantRankList = ref([
  {
    name: "桂林大酒店",
    amount: 286500.0,
    orders: 1286,
    rating: 4.8,
  },
  {
    name: "象鼻山景区",
    amount: 186500.0,
    orders: 986,
    rating: 4.6,
  },
]);

// 用户行为分析
const behaviorDateRange = ref([]);
const behaviorList = ref([
  {
    date: "2024-03-01",
    pv: 12860,
    uv: 6420,
    newUsers: 286,
    activeUsers: 4860,
    orderRate: 3.2,
    avgTime: "00:15:30",
  },
]);

// 图表实例
const transactionChartRef = ref(null);
const userChartRef = ref(null);
const incomeChartRef = ref(null);
const userDistributionChartRef = ref(null);
const ageChartRef = ref(null);
const consumptionChartRef = ref(null);
const orderChartRef = ref(null);
const orderTypeChartRef = ref(null);
const paymentChartRef = ref(null);

let transactionChart = null;
let userChart = null;
let incomeChart = null;
let userDistributionChart = null;
let ageChart = null;
let consumptionChart = null;
let orderChart = null;
let orderTypeChart = null;
let paymentChart = null;

onMounted(() => {
  // 初始化交易趋势图表
  transactionChart = echarts.init(transactionChartRef.value);
  transactionChart.setOption({
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: "line",
        smooth: true,
      },
    ],
  });

  // 初始化用户增长图表
  userChart = echarts.init(userChartRef.value);
  userChart.setOption({
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [120, 132, 101, 134, 90, 230, 210],
        type: "line",
        smooth: true,
      },
    ],
  });

  // 初始化收入构成图表
  incomeChart = echarts.init(incomeChartRef.value);
  incomeChart.setOption({
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        type: "pie",
        radius: "50%",
        data: [
          { value: 1048, name: "门票收入" },
          { value: 735, name: "酒店收入" },
          { value: 580, name: "文创收入" },
          { value: 484, name: "导游收入" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  });

  // 初始化用户分布图表
  userDistributionChart = echarts.init(userDistributionChartRef.value);
  userDistributionChart.setOption({
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        type: "pie",
        radius: "50%",
        data: [
          { value: 1048, name: "广西" },
          { value: 735, name: "广东" },
          { value: 580, name: "湖南" },
          { value: 484, name: "其他" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  });

  // 初始化年龄分布图表
  ageChart = echarts.init(ageChartRef.value);
  ageChart.setOption({
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    xAxis: {
      type: "category",
      data: [
        "18岁以下",
        "18-25岁",
        "26-35岁",
        "36-45岁",
        "46-55岁",
        "56岁以上",
      ],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110],
        type: "bar",
      },
    ],
  });

  // 初始化消费能力图表
  consumptionChart = echarts.init(consumptionChartRef.value);
  consumptionChart.setOption({
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    xAxis: {
      type: "category",
      data: ["低消费", "中低消费", "中等消费", "中高消费", "高消费"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [120, 200, 150, 80, 70],
        type: "bar",
      },
    ],
  });

  // 初始化订单趋势图表
  orderChart = echarts.init(orderChartRef.value);
  orderChart.setOption({
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["订单数", "完成率"],
    },
    xAxis: {
      type: "category",
      data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    },
    yAxis: [
      {
        type: "value",
        name: "订单数",
      },
      {
        type: "value",
        name: "完成率",
        min: 0,
        max: 100,
        interval: 20,
        axisLabel: {
          formatter: "{value}%",
        },
      },
    ],
    series: [
      {
        name: "订单数",
        type: "bar",
        data: [120, 132, 101, 134, 90, 230, 210],
      },
      {
        name: "完成率",
        type: "line",
        yAxisIndex: 1,
        data: [82, 93, 90, 93, 89, 95, 92],
      },
    ],
  });

  // 初始化订单类型分布图表
  orderTypeChart = echarts.init(orderTypeChartRef.value);
  orderTypeChart.setOption({
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        type: "pie",
        radius: "50%",
        data: [
          { value: 1048, name: "景点门票" },
          { value: 735, name: "酒店住宿" },
          { value: 580, name: "文创商品" },
          { value: 484, name: "导游服务" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  });

  // 初始化支付方式分布图表
  paymentChart = echarts.init(paymentChartRef.value);
  paymentChart.setOption({
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        type: "pie",
        radius: "50%",
        data: [
          { value: 1548, name: "微信支付" },
          { value: 835, name: "支付宝" },
          { value: 280, name: "银行卡" },
          { value: 184, name: "其他" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  });

  // 监听窗口大小变化
  window.addEventListener("resize", () => {
    transactionChart?.resize();
    userChart?.resize();
    incomeChart?.resize();
    userDistributionChart?.resize();
    ageChart?.resize();
    consumptionChart?.resize();
    orderChart?.resize();
    orderTypeChart?.resize();
    paymentChart?.resize();
  });
});
</script>

<style scoped>
.statistics-management {
  padding: 20px;
}

.statistics-tabs {
  margin-bottom: 20px;
}

.statistics-row {
  margin-bottom: 20px;
}

.chart-row {
  margin-bottom: 20px;
}

.statistics-card {
  height: 100px;
}

.statistics-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.statistics-icon {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.statistics-icon i {
  font-size: 24px;
  color: white;
}

.statistics-info {
  flex: 1;
}

.statistics-info .label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 5px;
}

.statistics-info .value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.statistics-info .trend {
  font-size: 12px;
  display: flex;
  align-items: center;
}

.trend.up {
  color: #67c23a;
}

.trend.down {
  color: #f56c6c;
}

.trend i {
  margin-left: 5px;
}

.chart-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rank-card {
  margin-bottom: 20px;
}

.behavior-card {
  margin-bottom: 20px;
}
</style>
